<template>
    <div class="goods-item">
      <div class="checkbox">
        <van-checkbox v-model="checked"></van-checkbox>
      </div>
      <div class="img">
        <img :src="item.imageUrl" alt="" />
      </div>
      <div class="detail">
        <h2 class="over-one">{{ item.title }}</h2>
        <h3>{{ item.introduce }}</h3>
        <div class="tag">
          <template>
            <van-tag plain type="danger">{{ item.keyProperty[0] }}</van-tag>
            &nbsp;
            <van-tag plain type="danger">{{ item.discountBenefitStr }}</van-tag>
          </template>
        </div>
        <div class="detail-bottom">
          <h3 class="price">￥{{item.marketPrice}}</h3>
          <div class="step">
            <van-stepper v-model="stepValue" />
          </div>
        </div>
      </div>
    </div>
</template>

<script>
import Vue from "vue";

import { Checkbox, CheckboxGroup,Tag,Stepper } from "vant";

Vue.use(Checkbox);
Vue.use(CheckboxGroup);
Vue.use(Tag);
Vue.use(Stepper);

export default {
  props: ["item"],
  data() {
    return {
      checked: false,
      stepValue:""
    };
  },
  created() {},
  computed: {},
  methods: {},
};
</script>

<style lang="stylus" scoped>
  
  .goods-item
    height 1.5rem
    background #fafafa
    margin-bottom 0.1rem
    flex 1
    display flex
    align-items center
    justify-content center
    .checkbox
      width .2rem
      height 0.2rem
      text-align center
      margin 0 .1rem

    .img
      width .9rem
      height 1rem
      display flex
      align-items center
      img
        width .7rem
        height .8rem
    .detail
      flex 1
      margin-right .1rem
      h2
        font-weight normal
        font-size .14rem
        margin-bottom .04rem
      h3
        font-weight normal
        font-size .1rem
        margin-bottom .08rem
        color #aaa
      .tag
         margin-bottom .08rem
      .detail-bottom
        display flex
        align-items center
        justify-content space-between
        .price
          color red
          font-weight bold
          font-size .14rem
        .step span
          display inline-block
          margin 0 .05rem
</style>
